<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="../assets/js/api.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<style>
    .center {
        margin: 50px auto;
    }
    .textcenter {
        text-align: center;
    }
</style>
<body>

<div id="userlist"   class="center textcenter">
    <div>
        <el-input v-model="search" style="width:200px" placeholder="请输入内容"></el-input>

        <el-button type="success" @click="update()"  icon=" el-icon-search" circle></el-button>

        <el-button type="success" icon="el-icon-circle-plus" @click=" userinsertialog = true" circle style="float: right;margin-right: 200px;"></el-button>

    </div>
    <template>
        <el-table
                :data="userData"
                style="width: 80%"
                class="center textcenter"
                :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名">
            </el-table-column>
            <el-table-column
                    prop="tel"
                    label="电话号码">
            </el-table-column>
            <el-table-column
                    prop="timer"
                    label="可借阅时间">
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="updateuser(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.username)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block center">

            <el-pagination
                    class="center textcenter"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage"
                    :page-sizes="[10,20,30,50]"
                    :page-size="pagesize"
                    layout="sizes, prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </template>

    <el-dialog
            title="修改用户信息"
            :visible.sync="userupdatedialog"
            width="600px"
            :before-close="handleClose">
            <el-form   :rules='rules' label-width="100px" :model="userinfo">
                <el-form-item label="用户名">
                    <el-input v-model="userinfo.username"  :disabled="true" prop></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="userinfo.name" prop></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model="userinfo.tel" prop></el-input>
                </el-form-item>
                <el-form-item label="可借阅时间">
                    <el-input v-model="userinfo.timer" prop></el-input>
                </el-form-item>
                <el-form-item >
                    <el-button @click="updateUserInfo()" type="text" size="small">提交</el-button>
                </el-form-item>
            </el-form>
    </el-dialog>

    <el-dialog
            title="添加用户信息"
            :visible.sync="userinsertialog"
            width="600px"
            :before-close="handleClose">
        <el-form  :rules='rules' label-width="100px" :model="userinfo">
            <el-form-item label="用户名">
                <el-input v-model="userinfo.username" prop></el-input>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="userinfo.name" prop></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="userinfo.tel" prop></el-input>
            </el-form-item>
            <el-form-item label="可借阅时间">
                <el-input v-model="userinfo.timer" prop></el-input>
            </el-form-item>
            <el-form-item >
            <el-button @click="insertUserInfo()" type="text" size="small">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#userlist',
        data: {
            userData: [{}],
            userinfo: {
                username:'',
                name:'',
                tel:'',
                timer:30,
            },
            search:'',
            rules:{
                username: { required: true, message: '请输入用户名', trigger: 'blur' },
                name: { required: true, message: '请输入姓名', trigger: 'blur' },
                tel: { required: true, message: '请输入电话号码', trigger: 'blur' },
                timer: { required: true, message: '请输入可借阅时间', trigger: 'blur' },
            },
            currentPage: 1,
            pagesize: 10,
            userupdatedialog: false,
            userinsertialog:false,
            total: 0,
            restaurants: [],
            state: ''
        }
        , created() {
            this.update();


        }
        , methods: {
            insertUserInfo(){
                api.post("/user/insert",this.userinfo).then(res=>{
                    if(res.state){
                        this.$message({
                            message:res.message,
                            type: 'success'
                        });
                        this.update();
                        this.userinsertialog=false;
                    }else{
                        this.$message({
                            message:res.message,
                            type: 'error'
                        });
                    }
                }).catch(res=>{
                    console.log(res);
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });


                })
            },
            updateUserInfo(){
                api.post("/user/update",this.userinfo).then(res=>{
                    if(res.state){
                        this.$message({
                            message:res.message,
                            type: 'success'
                        });
                        this.update();
                        this.userupdatedialog=false;
                    }else{
                        this.$message({
                            message:res.message,
                            type: 'error'
                        });
                    }
                }).catch(res=>{
                    console.log(res);
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });


                })
            },
            updateuser(res){
                this.userinfo=JSON.parse(JSON.stringify(res));
                this.userupdatedialog = true;
            },
            del(username){

                this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    api.post("/user/delete",{username}).then(res=>{
                        if(res.state){
                            this.$message({
                                message:res.message,
                                type: 'success'
                            });
                            this.update();
                        }else{
                            this.$message({
                                message:res.message,
                                type: 'error'
                            });
                        }
                    }).catch(res=>{
                        console.log(res);
                        this.$message({
                            message: '服务器异常,稍后重试',
                            type: 'error'
                        });


                    })
                }).catch(()=>{
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                })

            },
            handleSizeChange(val) {
                this.pagesize = val;
                console.log(`每页 ${this.pagesize} 条`);
                this.update()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${this.currentPage}`);
                this.update()
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.userinfo={
                            username:'',
                            name:'',
                            tel:'',
                            timer:30,
                        };
                        done();
                    })
                    .catch(_ => {
                    });
            },
             update() {
                api.post("/user/list", {pageNum: this.currentPage, pageSize: this.pagesize,key:this.search}).then(res => {
                    // console.log(res);
                    if (res.state) {
                        this.userData = res.data.list;
                        this.currentPage = res.data.pageNum;
                        this.total = res.data.total;
                        this.pagesize = res.data.pageSize;
                    } else {
                        this.$message({
                            message: '服务器异常,稍后重试',
                            type: 'error'
                        });
                    }


                }).catch(res => {
                    this.$message({
                        message: '服务器异常,稍后重试',
                        type: 'error'
                    });
                })
            }

        }
    })

</script>
</body>
</html>